<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- 

        DOM结点树：
        浏览器在渲染HTML的时候，把HTML看做是一棵树。
        结点：node
            元素结点：元素对象(element)
            如：var div=document.querySelector("div") div就是元素结点

            属性结点: attribute
            属性结点是在元素对象里面获取到的：
            var at=div.attributes  //获取所有属性
            属性有： attribute
                    nodeName     //属性名称
                    nodeType     //属性类型
                    nodeValue    //属性值

            文本结点：
            document.createTextNode('文本内容')
     -->
     <ul id="abc">
         <li><a href="">这是无序列表1</a></li>
         <li><a href="">这是无序列表1</a></li>
         <li>这是无序列表3</li>
         <li>这是无序列表4</li>
         <li>这是无序列表5</li>
     </ul>
    <script>
        var ul=document.querySelector("ul")
        var at=ul.attributes;   //获取所有属性结点
        alert(at[0].nodeValue) //abc
        console.log(at);       //NamedNodeMap
        console.log('--------------------');
        var li=document.querySelectorAll("li")
        var nodes=li.childNodes;   //获取li元素的所有子节点，里面包含子元素，还有文本结点
        console.log('nodeName==>',nodes[1].nodeName,'nodeType==>',nodes[1].nodeType,'nodeVaue==>',nodes[1].nodeValue);
        console.log(nodes);

    </script>
    
</body>
</html>